import React, { Component } from 'react'
import { NavLink } from 'react-router-dom';
import Blog from './Blog'
export default class BlogFather extends Component {
  constructor() {
    super();
    this.state = {
      msg: 'hello',
      target:'/comc'
    }
    this.blog1 = React.createRef()
  }
  changeProps() {
    this.setState({
      msg: 'hi'
    })
  }
  componentDidMount() {
    console.log('refs:',this.btn1);
    console.log('refs:',this.blog1);
  }
  render() {
    return (
      <div>
        <button ref={(btn1)=>this.btn1=btn1} onClick={()=>this.changeProps()}>外部因素，修改props</button>
        <p>{this.state.msg}</p>
        <Blog ref={this.blog1} msg={this.state.msg}/>
        <hr />
        <NavLink to="/" activeClassName="active">首页</NavLink><br />
        <NavLink to="/coma" activeClassName="active">coma</NavLink><br />
        <NavLink to="/comb" activeClassName="active">comb</NavLink><br />
        <NavLink to={this.state.target} activeClassName="active">comc</NavLink><br />  
      </div>
    )
  }
}
